/**
 * Created by Lixia on 2017/5/24.
 */
window.onload=function () {
    var prev=document.getElementById("prev");
    var next=document.getElementById("next");
    var imgList=document.getElementById("list");
    var buttons=document.getElementsByTagName('span');
    var index=1;
    var timer=null;//定时器


    function changeButton(index) {
        for(var i=1;i<=buttons.length;i++){
            buttons[i-1].className="";
        }
        buttons[index-1].className="on";
    }

    prev.onclick=function () {
        if(!imgList.style.left){
            imgList.style.left=0+'px';
        }
        if(parseInt(imgList.style.left)<0) {
            index -= 1;
            imgList.style.left = -index*600+600+'px';
            changeButton(index);
        }else{
            index=buttons.length;
            imgList.style.left=-index*600+600+'px';
            changeButton(index);
        }
    }

    next.onclick=function () {
        if(!imgList.style.left){
            imgList.style.left=0+'px';
        }
        if(parseInt(imgList.style.left)>-2400) {
            index += 1;
            imgList.style.left = -index*600+600+'px';
            changeButton(index);
        }else{
            index=1;
            imgList.style.left=-index*600+600+'px';
            changeButton(index);
        }
    }

    function setRepetition() {
        timer=setInterval(function () {
            var modle=index%6
            index+=1;
            if(index%6==0)
                index+=1;
            imgList.style.left = -modle*600+600+'px';
            changeButton(modle);
        },2000);
    }

    setRepetition();

}